<template>
  <div class="index">
    <header>
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="#fff">
        <van-swipe-item>
          <van-image fit="cover" width="100%" height="200px" :src="swipe1Src" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image fit="cover" width="100%" height="200px" :src="swipe2Src" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image fit="cover" width="100%" height="200px" :src="swipe3Src" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image fit="cover" width="100%" height="200px" :src="swipe4Src" />
        </van-swipe-item>
      </van-swipe>
    </header>
    <main class="index_main">
      <Card>
          <section class="selected" v-if="merchantId  != '-1'">
            <span class="selected_title">已选择{{ merchant?.name }}</span>
              <span class="selected_text">开始日料美味之旅</span>
              <van-button class="selected_button" color="#754C29" round type="primary" size="small" style="margin-top: 4px;" @click="handleNavigateMenu">开始点餐</van-button>
              <van-button class="selected_button" color="#754C29" plain round type="primary" size="small" style="margin-top: 4px;" @click="handleSelectShop">选择其他商家</van-button>
          </section>
          <section class="selected" v-if="merchantId == '-1'">
              <span class="selected_title">您未选择店铺</span>
              <span class="selected_text">请先选择门店开始美味之旅</span>
              <van-button class="selected_button" color="#754C29" round type="primary" size="small" style="margin-top: 4px;" @click="handleNavigateShop">选择门店</van-button>
          </section>
      </Card>
      <NavigationCard title="最新活动" path="/activity">
        <template #content>
          <van-cell-group inset style="margin-top: 8px;border: 1px #eee solid;" v-for="item in activityData"
            :key="item?.id">
            <van-cell :title="item?.title" :value="item?.createTime" size="large">
              <template #label>
                <p class="van-multi-ellipsis--l2">{{ item?.content }}</p>
              </template>
            </van-cell>
          </van-cell-group>
        </template>
      </NavigationCard>
    </main>
    <footer style="margin-top: 8px;">
      <NavigationCard title="最新公告" path="/notice">
        <template #content>
          <van-cell-group inset style="margin-top: 8px;border: 1px #eee solid;" v-for="item in noticeData"
            :key="item?.id">
            <van-cell :title="item?.title" :value="item?.createTime" size="large">
              <template #label>
                <p class="van-multi-ellipsis--l2">{{ item?.content }}</p>
              </template>
            </van-cell>
          </van-cell-group>
        </template>
      </NavigationCard>
    </footer>
    <section style="height: 80px;"></section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import NavigationCard from '@/components/NavigationCard/index.vue'
import { getNoticeList } from '@/apis/notice';
import { getActivityList } from '@/apis/activity';
import {getMerchantDetail} from '@/apis/merchant.js';
import swipe1Src from '@/assets/index-swipe1.png';
import swipe2Src from '@/assets/index-swipe2.png';
import swipe3Src from '@/assets/index-swipe3.png';
import swipe4Src from '@/assets/index-swipe4.png';
import Card from '@/components/Card/index.vue';


const merchantId = localStorage.getItem('merchantId');
const router = useRouter();

const noticeData = ref([]);

const activityData = ref([]);

const merchant = ref({});

const handleNavigateShop = () => {
  router.push('/shop');
};

const handleNavigateMenu = () => {
  router.push(`/home/menu/${merchant.value?.id}`);
};

const handleSelectShop = () => {
    router.push('/shop');
};

const init = async () => {
  const { data = [] } = await getNoticeList();
  noticeData.value = data?.list?.slice(0, 3);
  const { data: data2 = {} } = await getActivityList();
  activityData.value = data2?.list?.slice(0, 3);
  if(merchantId){
    const { data: merchantData = {} } = await getMerchantDetail(merchantId);
    merchant.value = merchantData;
  }
};

onMounted(() => {
  init()
});

</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.index {
  &_nav {
    margin-top: 8px;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    &_item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  }

  &_main {
    margin-top: 8px;
  }

  &_card {
    height: 96px;
    background-color: #fff;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &_icon {
      font-size: 48px;
    }
  }
}
.selected{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &_title{
    line-height: 24px;
    font-size: 16px;
    color: #333;
  }
  &_text{
    line-height: 24px;
    font-size: 12px;
    color: #999;
  }
  &_button{
    width: 120px
  }
}
</style>
